<template>
  <div class='detailManage-table'>
    <el-table
      :data='tableDatas'
    > 

      <el-table-column type='index' label='序号' width='80'  />
      <el-table-column
       :key='i'
        v-for='(k,i) in tableCol' 
       :label='k.label'
       :prop="k.value"
       :formatter='formatter'
       />

      <el-table-column label='操作' width='100'>
        <template scope='scope'>
          <span class="opt-btn-sp" v-if='scope.$index!==0 && scope.row.rigidType!==2'> 
            <a @click.stop='handleEdit(scope.$index)'><i class="fa fa-edit"></i>管理</a>
          </span>   
        </template>
      </el-table-column> 

    </el-table>


<!-- 
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNo"
        :page-size="page.pageSize"
        :page-sizes="[10, 40, 100, 200,400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
       />
     </div>
-->

     <edit-dialog :dialogVisible.sync='dialogVisible' :editProp ='editProp'/>


  </div>
</template>

<script>
import EditDialog from './editDialog'
import Bus from './bus'
import Vue from 'vue'
import { MessageBox, Message, Pagination } from 'element-ui'
Vue.use(Pagination)
export default {
  components: {
    EditDialog
  },
  data () {
    return {
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      tableCol: [
        {
          label: '节点名称',
          value: 'name'
        },
        // {
        //   label: '节点等级',
        //   value: 'nodeLevel'
        // }, 
        {
          label: '当前分支类型',
          value: 'nodeTypeNow'
        }, {
          label: '下级分支类型',
          value: 'nodeTypeNext'
        }, {
          label: '刚柔类型',
          value: 'rigidType'
        }, {
          label: '执行单位',
          value: 'assigneeName'
        },
        {
          label: '执行单位类型',
          value: 'assigneeType'
        }
      ],
      tableDatas: [],
      editProp: {},
      refresh: 0
    }
  },

  computed: {
    id () {
      return this.$route.query.id || ''
    },
    versionNum () {
      return this.$route.query.versionNum || ''
    }
  },

  watch: {
    refresh (newValue, oldValue) {
      newValue && (this.getTableData())
    }
  },

  methods: {

    handleEdit (i) {
      this.editProp = this.tableDatas[i]
      this.dialogVisible = true
    },

    formatter (row, column, cellValue) {

      if (column.property == 'nodeTypeNow') {
        switch (cellValue) {
          case 1:
            return '并行'
            break;
          case 2:
            return '串行'
            break;
        }
      }

      if (column.property == 'nodeTypeNext') {
        switch (cellValue) {
          case 0:
            return '无下级节点'
            break;

          case 1:
            return '串行'
            break;
          case 2:
            return '并行'
            break;

        }
      }

      if (column.property == 'rigidType') {
        switch (cellValue) {
          case 1:
            return '刚性节点'
            break;
          case 2:
            return '柔性节点'
            break;
          case 3:
            return '节点刚性人员柔性'
            break;
        }
      }

      if (column.property == 'assigneeType') {
        switch (cellValue) {
          case '1':
            return '通用角色'
            break;
          case '2':
            return '指定流程角色'
            break;
          case '3':
            return '单一执行人'
            break;
        }
      }
      return cellValue
    },

    handleSizeChange (val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getTableData()
    },
    getTableData () {
      const params = {
        processId: this.id,
        versionNum: this.versionNum,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }
      this.Axios
        .Post('/WfConfProcessMould/getAllProcessNodeByProcessId', params)
        .then((res) => {
          res.data.datas.map((ele, i) => {
            if (i === 0) {
              ele.assigneeName = ele.assigneeType = '无'
            }
          })

          this.tableDatas = res.data.datas

          this.page.total = res.data.total
        })
    },
  },

  mounted () {
    Bus.$on('refresh', (data) => this.refresh = data)
    this.getTableData()
  }
}
</script>

<style scoped>
.detailManage-table {
  padding: 0 20px 50px 20px;
}
.fenye {
  margin: 20px 0 0 -5px;
}

.fenye {
  margin: 20px 0 0 -5px;
}

.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin: 5px 0;
  cursor: pointer;
}
</style>

<style>
.detailManage-table .fenye .el-pagination span {
  line-height: 24px !important;
}

.detailManage-table .fenye .el-pagination__total {
  padding-top: 3px;
}
</style>
